<template>
	<div class="main-le clearfix">
		<div class="tit">{{leftData.tit}}</div>
		<div class="nav-item type" :class="[type == index?'on':'']" v-for="(item, index) in leftData.nav" :key="index" @click="tab(item)">{{item.name}}</div>
	</div>
</template>
<script>
	export default {
    props:{
      leftData:{
        type:Object,
        default: ()=>{
          return {}
        }
      }
    },
		data() {
			return {
				type:0,
			}
		},
		computed: {

		},
		watch: {

		},
		mounted() {
			this.type = this.$route.query.type
			console.log('mainLeData',this.$route.query.type)
		},
		// ******************* methods 开始 ****************** //
		methods: {
			tab(e){
				this.type = e.id;
        let query = this.$router.history.current.query;
        let path = this.$router.history.current.path;
        //对象的拷贝
        let newQuery = JSON.parse(JSON.stringify(query));
        // 地址栏的参数值赋值
        newQuery.type = e.id;
        this.$router.push({ path, query: newQuery });
				this.$emit('leftChange',e)
			},
		}
		// ******************** methods结束 ***************** //
	}
</script>
<style lang="scss">
	.main-le{
    width:240px;text-indent:40px;float: left;
    .tit{
      background-color: #0F54BC;
      color: #fff;
      font-size: 24px;
      line-height: 74px;
    }
    .nav-item{line-height: 55px;background-color: #F5F5F5;color: #666;margin-top: 10px;font-size: 16px;position: relative;;}
    .nav-item.on{color: #0F54BC;}
    .nav-item.on::before{content:'';display:block;width:3px;height:100%;position: absolute;left: 0;top:0;background-color: #0F54BC;}
  }
</style>
